<template>
	<div>
		<mj-title type="h2" title="Progress 进度条"></mj-title>
		<div class="page-desc">用于展示操作进度，告知用户当前状态和预期。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
                <div class="demo">
    			    <p><mj-progress v-model="progressValue"/></p>
    			    <p>&nbsp;</p>
    			    <p><mj-progress value="30"/></p>
    			    <p>&nbsp;</p>
    			    <p><mj-progress :value="100"/></p>
                </div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;div>
	    &lt;p>&lt;mj-progress v-model="progressValue"/>&lt;/p>
	    &lt;p>&lt;mj-progress :value="30"/>&lt;/p>
	    &lt;p>&lt;mj-progress :value="100"/>&lt;/p>
	&lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      progressValue: 0
	}
  },
	mounted() {
		let percent = 0
		let progressTimer = setInterval(()=>{
            percent += Math.floor(Math.random () * 3 + 1)
            if(percent > 95) {
                clearInterval(progressTimer)
            }
            this.progressValue = percent
        },200)
	}
}
&lt;/script>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="其他用法"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div class="demo">
				    <p>设置宽高</p>
                    <p><mj-progress :value="50" :width="300" :stroke-width="26"/></p>
                    <p>&nbsp;</p>
				    <p><mj-progress :value="50" :width="300"" :followText="false" :stroke-width="5"/></p>
				    <p>&nbsp;</p>
				    <p>设置背景和进度颜色</p>
				    <p><mj-progress :value="30" color="#ddd" borderColor="#f60"/></p>
				    <p>&nbsp;</p>
				    <p>进度文字固定位置</p>
				    <p><mj-progress :value="80" :followText="false"/></p>
				    <p>&nbsp;</p>
				    <p>隐藏进度文字</p>
				    <p><mj-progress :value="80" :showText="false"/></p>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;div>
	    &lt;p>设置宽高&lt;/p>
	    &lt;p>&lt;mj-progress :value="50" :width="300" :stroke-width="26"/>&lt;/p>
	    &lt;p>&nbsp;&lt;/p>
	    &lt;p>设置背景和进度颜色&lt;/p>
	    &lt;p>&lt;mj-progress :value="30" color="#ddd" borderColor="#f60"/>&lt;/p>
	    &lt;p>&nbsp;&lt;/p>
	    &lt;p>进度文字固定位置&lt;/p>
	    &lt;p>&lt;mj-progress :value="80" :followText="false"/>&lt;/p>
	    &lt;p>&nbsp;&lt;/p>
	    &lt;p>隐藏进度文字&lt;/p>
	    &lt;p>&lt;mj-progress :value="80" :showText="false"/>&lt;/p>
	&lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
	}
  }
}
&lt;/script>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="环形进度条"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div class="flex align-items-center">
					<mj-progress
						type="circle"
						:diameter="130"
						:stroke-width="6"
						:innerStrokeWidth="6"
						:completed-steps="completedSteps"
					 	:total-steps="totalSteps">
						<p>{{ completedSteps }}%</p>
					</mj-progress>
					<mj-input-number v-model="completedSteps" :min="0" :max="10" class="ml50"></mj-input-number>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;div>
		&lt;mj-progress
			type="circle"
			:diameter="130"
			:stroke-width="6"
			:innerStrokeWidth="6"
			:completed-steps="completedSteps"
		 	:total-steps="totalSteps">
			&lt;p>{{ completedSteps }}%&lt;/p>
		&lt;/mj-progress>
	&lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
		completedSteps: 5,
		totalSteps: 10
	}
  }
}
&lt;/script>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Progress Line 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>value</td>
            		<td>进度条百分比，v-model双向绑定</td>
            		<td>Number</td>
            		<td>0</td>
            	</tr>
            	<tr>
            		<td>type</td>
            		<td>进度条类型，支持<code>line直线</code>、<code>circle环形</code></td>
            		<td>String</td>
            		<td>line</td>
            	</tr>
            	<tr>
            		<td>width</td>
            		<td>进度条宽度</td>
            		<td>Number</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>stroke-width</td>
            		<td>进度条的线宽，单位 px</td>
            		<td>Number</td>
            		<td>15</td>
            	</tr>
            	<tr>
            		<td>color</td>
            		<td>进度条背景底色</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>borderColor</td>
            		<td>进度条颜色</td>
            		<td>String</td>
            		<td>#41a259</td>
            	</tr>
            	<tr>
            		<td>followText</td>
            		<td>百分比是否置于进度条内,type=line时有效</td>
            		<td>Boolean</td>
            		<td>true</td>
            	</tr>
            	<tr>
            		<td>showText</td>
            		<td>显示进度文字</td>
            		<td>Boolean</td>
            		<td>true</td>
            	</tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Progress Cricle 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>type</td>
            		<td>进度条类型，支持<code>line直线</code>、<code>circle环形</code></td>
            		<td>String</td>
            		<td>line</td>
            	</tr>
            	<tr>
            		<td>diameter</td>
            		<td>进度条圆圈的直径，单位px</td>
            		<td>Number</td>
            		<td>130</td>
            	</tr>
            	<tr>
            		<td>totalSteps</td>
            		<td>进度条的步骤总数</td>
            		<td>Number</td>
            		<td>10</td>
            	</tr>
            	<tr>
            		<td>completedSteps</td>
            		<td>进度条已完成的步数</td>
            		<td>Number</td>
            		<td>0</td>
            	</tr>
            	<tr>
            		<td>startColor</td>
            		<td>进度条渐变前的颜色</td>
            		<td>String</td>
            		<td>#2d8cf0</td>
            	</tr>
            	<tr>
            		<td>stopColor</td>
            		<td>进度条渐变结束时的颜色</td>
            		<td>String</td>
            		<td>#2d8cf0</td>
            	</tr>
            	<tr>
            		<td>innerStrokeColor</td>
            		<td>进度条的背景颜色</td>
            		<td>String</td>
            		<td>#e5e9f2</td>
            	</tr>
            	<tr>
            		<td>strokeWidth</td>
            		<td>进度条的宽度</td>
            		<td>String</td>
            		<td>15</td>
            	</tr>
            	<tr>
            		<td>innerStrokeWidth</td>
            		<td>背景/内圈的宽度</td>
            		<td>String</td>
            		<td>15</td>
            	</tr>
            	<tr>
            		<td>strokeLinecap</td>
            		<td>圆的笔划线帽类型，可设置<code>round</code>、<code>square</code></td>
            		<td>String</td>
            		<td>round</td>
            	</tr>
            	<tr>
            		<td>duration</td>
            		<td>动画持续时间量（以毫秒为单位）</td>
            		<td>Number</td>
            		<td>600</td>
            	</tr>
            	<tr>
            		<td>isClockwise</td>
            		<td>控制进度条的方向，默认顺时针</td>
            		<td>Boolean</td>
            		<td>true</td>
            	</tr>

            </tbody>
        </table>
	</div>
</template>

<script>
export default {
	data() {
	    return {
	    	value1:25,
			completedSteps: 5,
			totalSteps: 10,
			progressValue: 0
	    }
	},
	mounted() {
		let percent = 0
		let progressTimer = setInterval(()=>{
            percent += Math.floor(Math.random () * 3 + 1)
            if(percent > 95) {
                clearInterval(progressTimer)
            }
            
            this.progressValue = percent
        },200)
	}
}
</script>

<style scoped>
.demo .mj-progress {width:360px;}
</style>